<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="名称">
        <el-input v-model="queryForm.name" placeholder="请输入名称" clearable />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="loadCategoryList">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleOpenCategoryDialog(null)">添加分类</el-button>
    </div>
    <el-table :data="categoryList" stripe>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="sort" label="排序" />

      <el-table-column label="状态" width="100">
        <template #default="scope">
          <div class="table-column-status" :class="{ 'stop-use': scope.row.status == '0' }">
            {{ scope.row.status == '0' ? '禁用' : '启用' }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" />

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleOpenCategoryDialog(scope.row)">编辑</el-button>
          <el-button size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          <el-button size="small" type="danger" @click="handleUpdateStatus(scope.row.id,scope.row.status==1?'inactive':'active')">
            {{ scope.row.status == '1' ? '禁用' : '启用' }}
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

  <!--用户对话框-->
  <el-dialog v-model="dialogFormVisible" :title="categoryForm.id?'编辑分类':'添加分类'">
    <el-form ref="categoryFormRef" :model="categoryForm" :rules="categoryFormRule">
      <el-form-item label="名称" prop="name">
        <el-input placeholder="请输入名称" v-model="categoryForm.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input placeholder="请输入排序" v-model="categoryForm.sort" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关&nbsp;&nbsp;闭</el-button>
        <el-button type="primary" @click="handleSave">提&nbsp;&nbsp;交</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script setup lang="ts">
import { reactive, ref} from "vue";
import {getCategoryList,saveCategory,deleteCategoryById,updateStatus} from  "@/api/category"
import {ElMessageBox,ElMessage} from "element-plus";
const queryForm=reactive({name:"",page:1,pageSize:10});
let categoryList=reactive([]);
let total=ref(0);

let dialogFormVisible=ref(false);
let categoryFormRef = reactive(null);
const categoryForm=reactive({id:null,name:"",sort:""});
let categoryFormRule = reactive({
  name: [
    {
      required: true,
      trigger: 'blur'
    }
  ],
  sort: [
    {
      required: true,
      trigger: 'blur'
    }
  ]
})


//打开添加、编辑分类对话框
let handleOpenCategoryDialog=(category)=>{
  categoryForm.id=null;
  categoryForm.name=null;
  categoryForm.sort=null;

  if(category){
    categoryForm.id=category.id;
    categoryForm.name=category.name;
    categoryForm.sort=category.sort;
  }
  dialogFormVisible.value=true;
}


//处理添加、编辑分类
let handleSave=()=>{
  //判断是否校验通过
  categoryFormRef.validate((valid) => {
    if (valid) {
      saveCategory(categoryForm.id,categoryForm).then((resp) => {
        dialogFormVisible.value=false;
         loadCategoryList();
      });
    }
  });
}

//处理删除操作
let handleDelete=(categoryId)=>{
  //确认对话框
  ElMessageBox.confirm(
      "是否删除?",
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //发送请求
    deleteCategoryById(categoryId).then(resp=>{
      if(resp.code==200){
        loadCategoryList()
      }else{
        ElMessage.error(resp.msg);
      }
    })
  }).catch(()=>{
  })
}

//更新状态
let handleUpdateStatus=(categoryId,status)=>{
  //确认对话框
  ElMessageBox.confirm(
      "是否修改状态?",
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    updateStatus(categoryId,status).then(resp=>{
      loadCategoryList()
    })
  }).catch(()=>{
  })
}


//定义方法
let loadCategoryList=()=>{
  //准备数据
  getCategoryList(queryForm).then((resp)=>{
    categoryList.length = 0;
    categoryList.push(... resp.data);

    total.value=resp.total;
  });
}

let handleSizeChange=(pageSize)=>{
  queryForm.pageSize = pageSize;
  loadCategoryList()
}

let handlePageChange=(page)=>{
  queryForm.page = page;
  loadCategoryList();
}

loadCategoryList();
</script>

<style scoped>

</style>
